<fm-deliver-to></fm-deliver-to>


<div class="row-fluid">

  <div class="span3 fm-panel">
    <h4>Filter Restaurants</h4>

    <form>

      <h5>Rating</h5>

      <fm-rating ng-model="$parent.filter.rating"></fm-rating>


      <h5>Price</h5>

      <fm-rating ng-model="$parent.filter.price" symbol="$"></fm-rating>


      <h5>Cuisine</h5>

      <div fm-checkbox-list ng-model="filter.cuisine">
        <label ng-repeat="(name, title) in CUISINE_OPTIONS" class="checkbox">
          <input type="checkbox" value="{{name}}"> {{title}}
        </label>
      </div>
    </form>
  </div>


  <div class="span9 fm-panel fm-restaurant-list">
    <h4>
      <ng-pluralize count="restaurants.length"
                    when="{'0'    : 'No restaurants found. :-(',
                           'one'  : '1 restaurant found!',
                           'other': '{} restaurants found!'}">
      </ng-pluralize>
    </h4>

    <table class="table table-hover table-striped">
      <tr>
        <th><a href ng-click="sortBy('name')">Name {{sortIconFor('name')}}</a></th>
        <th><a href ng-click="sortBy('price')">Price {{sortIconFor('price')}}</a></th>
        <th><a href ng-click="sortBy('rating')">Rating {{sortIconFor('rating')}}</a></th>
      </tr>
      <tr ng-repeat="restaurant in restaurants">
        <td>
          <a href="#/menu/{{restaurant.id}}">
            <img class="img-rounded pull-left" ng-src="img/restaurants/{{restaurant.id}}.jpg">
            <b>{{restaurant.name}}</b>
          </a>
          <p>{{restaurant.description}}</p>
        </td>
        <td>
          <fm-rating ng-model="$parent.restaurant.rating" readonly="true"></fm-rating>
        </td>
        <td>
          <fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true" ></fm-rating>
        </td>
      </tr>
    </table>
  </div>
</div>
